<template>
  <div class="container">
    <el-form
      ref="wbsFormRef"
      :model="formData"
      :rules="rules"
      label-position="top"
    >
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.projectName')">
            <el-input :value="projectInfo?.p_name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.projectNo')">
            <el-input :value="projectInfo?.p_no" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.wbsName')" prop="wbs_name">
            <el-input
              v-model="formData.wbs_name"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.islock')" prop="islock">
            <el-select v-model="formData.islock" :disabled="disabled">
              <el-option :key="0" :label="$t('common.no')" :value="0" />
              <el-option :key="1" :label="$t('common.yes')" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.startDate')" prop="start_d">
            <el-date-picker
              v-model="formData.start_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.endDate')" prop="end_d">
            <el-date-picker
              v-model="formData.end_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.status')" prop="status">
            <el-select v-model="formData.status" :disabled="disabled">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.isMilestone')" prop="is_milestone">
            <el-select v-model="formData.is_milestone" :disabled="disabled">
              <el-option :key="0" :label="$t('common.no')" :value="0" />
              <el-option :key="1" :label="$t('common.yes')" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :span="24">
          <el-form-item
            :label="$t('common.wbsEarly')"
            prop="early_start_dependency"
          >
            <el-input
              v-model="formData.early_start_dependency"
              size="large"
              :placeholder="$t('common.pleaseEnter')"
              type="textarea"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :span="24">
          <el-form-item :label="$t('common.remark')" prop="wbs_description">
            <el-input
              v-model="formData.wbs_description"
              size="large"
              :placeholder="$t('common.pleaseEnter')"
              type="textarea"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { WBSInfoForm, WBSProjectList } from "@/api/wbs/model";
defineOptions({
  name: "BasicInfoForm",
});
const { t } = useI18n();
// 状态
const statusOptions = ref<Options[]>([
  {
    value: 1,
    label: t("common.toBegin"),
  },
  {
    value: 2,
    label: t("common.haveInHand"),
  },
  {
    value: 3,
    label: t("common.completed"),
  },
  {
    value: 4,
    label: t("common.paused"),
  },
  {
    value: 5,
    label: t("common.expired"),
  },
]);

withDefaults(
  defineProps<{
    projectInfo: WBSProjectList | undefined;
    disabled: boolean;
  }>(),
  {
    disabled: false,
  }
);

const formData = reactive<WBSInfoForm>({
  status: 1,
});
const wbsFormRef = ref(ElForm);
const rules = reactive({
  wbs_name: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  islock: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  start_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  end_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  status: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  is_milestone: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
});
defineExpose({ wbsFormRef, formData });
</script>
